{% extends 'index.html' %}

{% block style %}
    {{ super() }}
    <style>
        label {
            margin-top: 5px;
            text-align: right;;
        }

        #addon {
            overflow: scroll;
            max-height: 500px;
            display: none;
            background-color: #e5e5e5;

        }

        #addon a {
            text-decoration: none;
            color: #000;
            cursor: pointer;
        }

        .list-group {
            position: fixed;
        }
    </style>
{% endblock %}

{% block body %}

    <div class="row">
        <div class="col-md-2">
            <ul class="list-group">
                <li class="list-group-item">
                    <a href="#deployCrawler">
                        爬虫部署
                    </a>
                </li>

                <li class="list-group-item">
                    <a href="#closeCrawler">
                        关闭爬虫
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="row" id="deployCrawler">
        <div class="col-md-2"></div>
        <div class="col-md-10">
            {% if message %}
                <div class="alert alert-success">{{ message }}</div>
            {% endif %}
            <fieldset>
                <legend>
                    爬虫部署
                </legend>
                <form action="/deploy" method="post" enctype="multipart/form-data">
                    <fieldset>
                        <legend>
                            s3配置
                        </legend>
                        <div class="row">

                            <div class="col-md-2">
                                <label>s3地址</label>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-default dropdown-toggle"
                                                    data-toggle="dropdown">Bucket <span class="caret"></span></button>
                                            <ul class="dropdown-menu" role="menu">
                                            </ul>
                                        </div>
                                        <input class="form-control" type="text" placeholder="s3_addr" name="s3_addr">
                                        <div id="addon" style="z-index: 99; position:fixed;margin-top: 32px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label>
                                    上传文件
                                </label>
                            </div>
                            <div class="col-md-4">
                                <input type="file" name="file" class="form-control">
                            </div>
                        </div>
                    </fieldset>
                    <br>
                    <fieldset>
                        <legend>
                            应用配置
                        </legend>
                        <div class="row">
                            <div class="col-md-2">
                                <label>应用名称</label>
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="app_name" placeholder="saic-aws-crawler">
                            </div>
                            <div class="col-md-2">
                                <label>启动文件名称</label>
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="start_file_name" placeholder="crawler.py">
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-md-2">
                                <label>
                                    启动文件路径
                                </label>
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="start_file_path" placeholder="./path/">
                            </div>
                            <div class="col-md-2">
                                <label>
                                    启动环境
                                </label>
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="enviroment" value="/usr/bin/python">
                            </div>
                        </div>

                    </fieldset>
                    <br>
                    <fieldset>
                        <legend>
                            ec2配置
                        </legend>
                        <div class="row">
                            <div class="col-md-2">
                                <label>
                                    实例名称
                                </label>
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="instance_name"
                                       PLACEHOLDER="sc-saic-crawler">
                            </div>
                            <div class="col-md-2">
                                <label>
                                    镜像id
                                </label>
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="image_id" placeholder="ami-d2da0ebf"
                                value="ami-d2da0ebf">
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-md-2">
                                <label>
                                    启动实例数量
                                </label>
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="instance_num" placeholder="10">
                            </div>
                            <div class="col-md-2">
                                <label>
                                    启动进程数量
                                </label>
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="process_num" placeholder="2">
                            </div>
                        </div>
                    </fieldset>
                    <br/>
                    <input type="submit" class="btn btn-success btn-block" value="部署">
                </form>
            </fieldset>
        </div>
    </div>
    <br/>
    <div class="row" id="closeCrawler">
        <div class="col-md-2"></div>
        <div class="col-md-10">
            <form action="/terminate" method="post">
                <fieldset>
                    <legend>
                        关闭爬虫(终止实例)
                    </legend>

                    <div class="col-md-2">
                        <label>
                            实例名称标签
                        </label>
                    </div>

                    <div class="col-md-4">
                        <select class="form-control" id="tag" name="name">

                        </select>
                    </div>
                    <div class="col-md-2">
                        <label>
                            {#                            private ips#}
                        </label>
                    </div>
                    <div class="col-md-4">
                        {#                        <textarea class="form-control" rows="4" placeholder="一行一个"></textarea>#}
                    </div>
                    <br/>
                    <br/>
                    <div class="col-md-2">
                        <label>
                            实例id
                        </label>
                    </div>
                    <div class="col-md-4">
                        <textarea class="form-control" rows="4" placeholder="一行一个" name="instancesId"></textarea>
                    </div>


                </fieldset>
                <br/>
                <input type="submit" class="btn btn-danger btn-block" value="终止">
            </form>
        </div>
    </div>

{% endblock %}

{% block script %}

    <script type="text/javascript">
        $(function () {
            $.get('/get_s3_url', function (data) {
                data.data.forEach(function (e) {
                    $('.dropdown-menu').append('<li onclick="getValue(\'' + e.Name + '\')"><a>' + e.Name + '</a></li>');
                });
            });
            $.get('/get_ec2_tags', function (data) {
                data.data.forEach(function (e) {
                    $('#tag').append('<option value="' + e + '">' + e + '</option>')
                })
            })
        });
        function getValue(s) {
            $('input[name=s3_addr]').val('s3://' + s + '/');
            $('#addon').css('display', 'block')
            $.get('/get_s3_url?bucket=' + s, function (data) {
                $('#addon').html('')
                data.data.forEach(function (e) {
                    $("#addon").append('<a onclick="addon(\'' + e.Key + '\')">' + e.Key + '</a><br />')
                });
            });
        }
        function addon(s) {
            v = $('input[name=s3_addr]').val()
            $('input[name=s3_addr]').val(v + s)
            $('#addon').css('display', 'none')
        }


    </script>
{% endblock %}